<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>day08_demo03</title>
<script>
	var cities;
	window.onload=function(){
			cities=[
		         	 ["石家庄","廊坊","保定"],
		         	 ["济南","青岛","烟台"],
		         	 ["南京","苏州","无锡"]
		          ];	
	
	}	
	function chg(){
		//获取城市下标
		var p=document.getElementById("province").value;
		console.log(p);
		//获取本省份的城市
		var pcities=cities[p];
		//先删除旧的城市
		var select=document.getElementById("city");
		//var options=select.getElementsByTagName("option");
			
 		/* for(var i=options.length-1;i>0;i--){
 			select.removeChild(options[i]);
 		} */
 		select.innerHTML="<option>请选择</option>";
 		
		//再追加新的城市
		if(pcities){
			for(var i=0;i<pcities.length;i++){
				var opt=document.createElement("option");
				opt.innerHTML=pcities[i];
				select.appendChild(opt);
				
			}		
		}
		
		
		
	} 
	
	
</script>
</head>
<body>
	省:
	<select id="province" onchange="chg();">
		<option value="-1">请选择</option>
		<option value="0">河北省</option>
		<option value="1">山东省</option>
		<option value="2">江苏省</option>
	
	</select>
	
	市:
	<select id="city">
		<option>请选择</option>

	</select>
	
	
</body>
</html>



















